<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用js和jsx来实现ilikeyou</title>
  </head>
  <body>
    <div id="root1"></div>
    <div id="root2"></div>

    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script>
      // ------------------------ 1. 普通JS语法（不要babel）
      // 1.创建虚拟DOM对象
      const vDOM = React.createElement(
        "h1", //元素类型
        { id: "title1", className: "class1" }, //元素属性
        "i like you!" //元素里面内容
      );
      // 2.将虚拟DOM对象渲染到指定容器
      ReactDOM.render(vDOM, document.getElementById("root1"));
    </script>

    <script type="text/babel">
      // ------------------------2. JSX语法（需要babel）
      const id = "title2";
      const content = "I like you!";
      const vDOM2 = <h1 id={id}>{content}</h1>;
      ReactDOM.render(vDOM2, document.getElementById("root2"));
    </script>
  </body>
</html>
